<template>
  <div class="add-article">
    <el-card>
      <template v-slot:header>
        <my-breadcrumb>发布文章</my-breadcrumb>
      </template>

      <!-- 内容部分 -->
      <el-form ref="myform" :model="form" label-width="60px" :rules="rules">
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <quill-editor @blur="quillFn" @change="quillFn" v-model="form.content" :options="editorOption"></quill-editor>
        </el-form-item>
        <el-form-item label="封面">
          <!-- 写死的, 没有绑定值, 后面会实现 -->
          <el-radio-group v-model="form.cover.type" @change='changeCover'>
            <el-radio :label="1">单图</el-radio>
            <el-radio :label="3">三图</el-radio>
            <el-radio :label="0">无图</el-radio>
            <el-radio :label="-1">自动</el-radio>
          </el-radio-group>
          <!-- 单图和三图 -->
          <div v-if="form.cover.type > 0" :key="form.cover.type">
            <my-cover
            v-for="(item,index) in form.cover.type"
            :key="index"
            v-model="form.cover.images[index]">
            </my-cover>
          </div>
          <!-- 自动 -->
          <div v-if="form.cover.type === -1" :key="form.cover.type">
            <my-cover
            v-for="(item,index) in (form.cover.images.length + 1)"
            :key="index"
            v-model="form.cover.images[index]">
            </my-cover>
          </div>
        </el-form-item>
        <el-form-item label="频道" prop="channel_id">
          <el-select v-model="form.channel_id" placeholder="请选择">
            <el-option
              v-for="item in channels"
              :key="item.channel_id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addArticles(false)">发表</el-button>
          <el-button @click="addArticles(true)">存入草稿</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import MyBreadcrumb from '@/components/my-breadcrumb.vue'
import MyCover from '@/components/my-cover.vue'
import { reqGetChannels, reqAddArticles } from '@/api/articles.js'
export default {
  name: 'add-article',
  components: {
    MyBreadcrumb,
    quillEditor,
    MyCover
  },
  data () {
    return {
      form: {
        title: '',
        content: '',
        channel_id: '',
        cover: {
          type: 0,
          images: []
        }
      },
      channels: [],
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: ['change', 'blur'] },
          { min: 5, max: 30, message: '长度在5到30字', trigger: ['change', 'blur'] }
        ],
        content: [
          { required: true, message: '请输入内容', trigger: ['change', 'blur'] }
        ],
        channel_id: [
          { required: true, message: '请选择频道', trigger: ['change', 'blur'] }
        ]
      },
      // 富文本配置对象
      editorOption: {
        // 占位配置
        placeholder: '',
        modules: {
          // 配置工具栏
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote', 'code-block'],
            [{ header: 1 }, { header: 2 }],
            [{ list: 'ordered' }, { list: 'bullet' }],
            [{ indent: '-1' }, { indent: '+1' }],
            ['image']
          ]
        }
      }
    }
  },
  created () {
    this.getChannels()
  },
  methods: {
    async getChannels () {
      const res = await reqGetChannels()
      // console.log(res.data)
      this.channels = res.data.data.channels
    },
    addArticles (draft) {
      this.$refs.myform.validate(async flag => {
        if (flag) {
          try {
            await reqAddArticles(draft, this.form)
            //   // console.log(res.data)
            this.$message.success('发布成功')
            this.$router.push('/articles')
          } catch (err) {
            console.log(err)
          }
        }
      })
    },
    quillFn () {
      this.$refs.myform.validateField('content')
    },
    changeCover () {
      this.form.cover.images = []
    }
  }
}
</script>

<style lang="less" scoped>
.add-article /deep/ .ql-editor {
  min-height: 300px;
}
.add-article /deep/ .ql-toolbar {
  padding: 0 8px;
}
.quill-editor {
  min-height: 300px;
}
.my-cover {
  float: left;
  margin: 5px 15px;
}
</style>
